<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="后台管理系统">
    <meta name="description" content="">
    <link rel="shortcut icon" href="/img/favicon.ico">

    <link rel="stylesheet" href="/plugins/layui_v2/css/layui.css">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_9h680jcse4620529.css">


    <script src="/plugins/layui_v2/layui.js"></script>
</head>
<body class="childrenBody" style="font-size: 12px;margin: 10px 10px 0;">
<blockquote class="layui-elem-quote layui-quote-nm" style="border-radius:0.25em;color: #31708f;background-color: #d9edf7;border-width:1px; padding:6px; border-color:#bce8f1;">
        温馨提示:1.菜单类型为菜单时父级菜单可以为空;2.菜单类型为按钮时父级菜单不能为空;3.父级菜单选中时，资源路径不能为空
</blockquote>
<form class="layui-form layui-form-pane">
    <input id="id" name="id" type="hidden" th:value="${menu.id}">
    <input id="parentId" name="parentId" type="hidden" th:value="${menu.parentId}">
    <input id="pageFlag"  type="hidden" th:value="${pageFlag}">
    <input id="resParentCount"  type="hidden" th:value="${resParentCount}">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-inline">
                <input type="text" id="name" name="name" class="layui-input" maxlength="20" th:value="${menu.name}" lay-verify="required|name" placeholder="请输入菜单名称">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">菜单类型</label>
            <div class="layui-input-inline">
                <select id="resType" name="type" lay-filter="resTypeFilter" lay-verify="required">
                    <option value="">请选择</option>
                    <option th:selected="${menu.parentId == 0}" value="0">目录</option>
                    <option th:selected="${menu.parentId == 1}" value="1">菜单</option>
                    <option th:selected="${menu.parentId == 2}" value="2">按钮</option>
                </select>
            </div>
        </div>


    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">菜单级别</label>
            <div class="layui-input-inline">
                <select id="resLevel" name="menuLevel" lay-filter="resLevelFilter" lay-verify="required">
                    <option value="">请选择</option>
                    <option th:selected="${menu.menuLevel == 1}" value="1">一级菜单</option>
                    <option th:selected="${menu.menuLevel == 2}" value="2">二级菜单</option>
                    <option th:selected="${menu.menuLevel == 3}" value="3">三级菜单</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">父级菜单</label>
            <div class="layui-input-inline">
                <input type="text" id="parentName" name="parentName" class="layui-input" disabled maxlength="20" th:value="${menu.parentName}">
            </div>
            <span style="float: left;">
                <div class="layui-word-aux">
                    <a class="layui-btn layui-btn-mini select_parentName" data-id=""><i class="layui-icon larry-icon larry-zidingyicaidan"></i></a>
                </div>
            </span>
        </div>
    </div>
    <div class="layui-form-item">

        <div class="layui-inline">
            <label class="layui-form-label">菜单路径</label>
            <div class="layui-input-inline">
                <input type="text" id="url" name="url" class="layui-input" maxlength="50" lay-verify="url" th:value="${menu.url}">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">菜单图标</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="icon" name="icon" lay-verify="required" th:value="${menu.icon}" disabled>
            </div>
            <span style="float: left;">
                <div class="layui-word-aux">
                    <a class="layui-btn layui-btn-mini select_img" data-id="" title="选择图标"><i class="layui-icon larry-icon larry-tupianguanli"></i></a>
                </div>
            </span>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">菜单状态</label>
            <div class="layui-input-inline" style="border: 1px solid #e6e6e6;background-color: #fff;height: 36px;">
                <input type="radio" name="status" value="1" title="有效" th:checked="${menu.status == 1}" />
                <input type="radio" name="status" value="0" title="失效" th:checked="${menu.status == 0}" />
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline">
                <input type="text" id="sort" name="sort" class="layui-input" lay-verify="sort" maxlength="10" th:value="${menu.sort}">
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea id="remark" name="remark" placeholder="请输入内容" class="layui-textarea" maxlength="50" style="resize:none;min-height:40px;" th:text="${menu.remark}"></textarea>
        </div>
    </div>
    </div>
    <div class="layui-form-item" style="text-align: center;">
        <button class="layui-btn" lay-submit="" lay-filter="saveRes">保存</button>
        <button type="layui-btn" id="cancle" class="layui-btn layui-btn-primary">取消</button>
    </div>
</form>
<script type="text/javascript">
    layui.config({
        base : "/js/"
    }).use(['form','layer','jquery','common'],function(){
        var $ = layui.$,
            form = layui.form,
            common = layui.common,
            layer = parent.layer === undefined ? layui.layer : parent.layer;


        /**菜单新增初始化*/
        resInit();

        /***菜单新增初始化**/
        function resInit(){
            var pageFlag = $("#pageFlag").val();
            if(pageFlag == "addPage"){
                //默认菜单级别不可点击
                $("#resLevel").attr("disabled","disabled");
            }
            //更新标识
            if(pageFlag == "updatePage"){
                 resTypeVal = '${menu.type}';
                 resLevelVal = '${menu.menuLevel}';
                 resParentIdVal = '${menu.parentId}';
                 resParentCount = '${resParentCount}';

                //菜单类型选中，不能点击
                $("#resType option[value='"+resTypeVal+"']").prop("selected","selected");
                $("#resType").attr("disabled","disabled");

                //菜单级别选中
                $("#resLevel option[value='"+resLevelVal+"']").prop("selected","selected");
                if(resTypeVal == 1 || (resTypeVal == 0 && resParentCount > 0)){
                    $("#resLevel").attr("disabled","disabled");

                }
                if(resLevelVal == 1){
                    $("#url").val('');
                    $("#url").attr("disabled","disabled");
                }
                //加载父级菜单
                loadParentMenu();
                $("#parentId option[value='"+resParentIdVal+"']").prop("selected","selected");
            }

            form.render('select');
        }
        /**监听菜单类型选择*/
        form.on('select(resTypeFilter)', function(data){
            //如果菜单类型为按钮, 菜单级别选中三级菜单,并禁用选择
            if(data.value == 2){
                $("#resLevel option[value='3']").prop("selected","selected");
                $("#resLevel").attr("disabled","disabled");
            }else{
                $('#parentId option').not(":first").remove();
                $("#resLevel").removeAttr("disabled");
                $("#resLevel option:first").prop("selected", 'selected');
                $("#url").removeAttr("disabled","disabled");

            }
            form.render('select');

            //加载父级菜单
            loadParentMenu();
        });

        /**监听菜单级别选择*/
        form.on('select(resLevelFilter)', function(data){
            if(data.value == 1){
                $("#url").val('');
                $("#url").attr("disabled","disabled");
            }else{
                $("#url").removeAttr("disabled","disabled");

            }
        });


        /**选择图标*/
        $(".select_img").click(function(){
            var url = "/sys/menu/icon";
            common.cmsLayOpen('选择图标',url,'485px','370px');
        });

        /*选择父菜单*/
        $(".select_parentName").click(function () {
            var parentId = $('#parentId').val();
            if(parentId == 0){
                common.cmsLayErrorMsg("一级菜单不能选择父菜单!");
                return false;
            }
            var url = "/sys/menu/parentMenu";
            common.cmsLayOpen('选择父菜单',url,'250px','360px');
        });

        /**表单验证*/
        form.verify({
            name: function(value, item){
                //验证菜单名称
                if(!new RegExp("^[0-9a-zA-Z\u4e00-\u9fa5]+$").test(value)){
                    return '菜单名称只能为中文数字或者字母';
                }

            },
            parentId:function(value,item){
                //验证父级菜单
                var  resLevel = $("#resLevel").val();
                if((resLevel == 2 || resLevel == 3) && value == ''){
                    return '父级菜单不能为空';
                }
            },
            url: function(value, item){
                //验证菜单路径
                var  resLevel = $("#resLevel").val();
                var resParentCount = $("#resParentCount").val();
                if((resLevel == 2 || resLevel == 3) && value == '' && resParentCount < 0){
                    return '菜单路径不能为空';
                }
                if(value != '' && !new RegExp("^[a-zA-Z_/.]+$").test(value)){
                    return '菜单路径只能为英文下划线斜杠和点';
                }
            },
            sort: function(value, item){
                //验证排序
                if(value != '' && !new RegExp("^[0-9]*$").test(value)){
                    return '排序只能为数字';
                }

            }
        });


        /**保存菜单资源信息*/
        form.on("submit(saveRes)",function(data){
            var resSaveLoading = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});
            $.ajax({
                url : '/sys/menu/save',
                type : 'post',
                async: false,
                data : data.field,
                success : function(data) {
                    if(data.code == 0000){
                        location.reload();
                        top.layer.close(resSaveLoading);
                        common.cmsLaySucMsg("保存成功");
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                        parent.location.reload();
                    }else{
                        top.layer.close(resSaveLoading);
                        common.cmsLayErrorMsg(data.returnMessage);
                    }
                },error:function(data){
                    top.layer.close(resSaveLoading);
                    top.layer.close(index);
                }
            });
            return false;
        });





        /**取消*/
        $("#cancle").click(function(){
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
        });

    });

</script>
</body>
</html>